<template>
  <Form ref="formValidate" :model="formValidate" inline style="display: flex">   
    <FormItem prop="fromTime" style="display: flex">
      <DatePicker type="daterange" placeholder="请选择就诊时间" v-model="time" separator='至' style="width: 200px"></DatePicker>
    </FormItem>
    <FormItem style="display: flex">
      <Select v-model="formValidate.inquiryType" :key="formValidate" style="width:200px" placeholder="咨询形式" clearable>
        <Option v-for="item in inquiryTypeList" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
      </Select>
    </FormItem>
    <FormItem style="display: flex">
      <Select class="w-select" clearable v-model="formValidate.status" style='width:100px;' placeholder="状态">
            <Option
              v-for="item in zhuangtai"
              :value="item.dictValue"
              :key="item.dictValue"
              style='text-align:center'
            >{{item.dictName}}</Option>
          </Select>
    </FormItem>
    <FormItem style="display: flex">
      <Input placeholder="请输入医生名称" v-model="formValidate.doctorName" clearable></Input>
    </FormItem>
    <FormItem :label-width="10">
      <Button @click="handleSearch" type="primary" icon="ios-search" style="marginRight: 20px; width: 50px;height:32px"></Button>
      <Button style="width: 50px;height:32px" @click="handleReset">
        <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
      </Button>
    </FormItem>
  </Form>
</template>

<script>
import { DatePicker } from "view-design";
export default {
  props: {
    onSearch: {
      type: Function,
      default: () => { }
    },
    onReset: {
      type: Function,
      default: () => { }
    },
  },
  components: {
        DatePicker,
    },
  data() {
    return {
      time: [],
      formValidate: {
        fromTime: null,
        endTime: null,       
        doctorName: null,
        inquiryType: null,
        status: null,
      },
      zhuangtai: [
          // {dictName: '问诊中', dictValue: 1},
          // {dictName: '已完成', dictValue: 2},
          // {dictName: '已退诊', dictValue: 3},
          // {dictName: '待接诊', dictValue: 4},
          // {dictName: '待付款', dictValue: 5},
          // {dictName: '已取消', dictValue: 6},

          {dictName: '待支付', dictValue: -1},
          {dictName: '待接诊', dictValue: 0},
          {dictName: '就诊中', dictValue: 1},
          {dictName: '已完成', dictValue: 2},
          {dictName: '拒绝接诊', dictValue: 3},
          {dictName: '爽约', dictValue: 4},
          {dictName: '已取消', dictValue: 5},
        ],
      inquiryTypeList: [
        {dictValue: 0, dictName: '图文'},
        // {dictValue: 1, dictName: '语音'},
        {dictValue: 2, dictName: '视频'}
      ]
    }
  },
  methods: {
    handleSearch() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
            this.formValidate.fromTime = this.time[0],
            this.formValidate.endTime = this.time[1],
            this.onSearch(this.formValidate);
        } else {
            this.$Message.error('Fail!');
        }
      })
    },
    handleReset() {
      this.$refs['formValidate'].resetFields();
      this.formValidate.doctorName = ''
      this.formValidate.inquiryType = ''
      this.formValidate.status = ''
      this.time = []
      this.onReset();
    }
  }
}
</script>

<style scoped lang="less">
.ivu-form {
  /deep/ .ivu-form-item-label {
    // font-weight: bold;
  }
}
</style>